import { Link, Outlet } from 'umi';
import { useState, useEffect } from 'react';
import { lightTheme, darkTheme } from '@/config/theme';
import { Actions } from '@/components';
import { Navs, Background } from '@/containers';
import './index.less';


export default function Layout() {
  const [currentTheme, setCurrentTheme] = useState(lightTheme);

  useEffect(() => {
    const root = document.documentElement;

    Object.keys(currentTheme.colors).forEach(color => {
      root.style.setProperty(`--${color}-color`, currentTheme.colors[color as any]);
    })

  }, [currentTheme]);

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <>
      <Background />
      <div className='layout-container'>
        <div className='layout-content'>
          {/* <button onClick={toggleTheme}>切换主题</button> */}
          <Navs />
          <Outlet />
          <Actions />
        </div>
      </div>
    </>
    
  );
}
